<template>
  <div class="AlipayMini">
    <div class="notice">{{$t('configLazyLoad.channel.AliAPPTip1')}}</div>
    <configCompositionTwoWindowStyle>
      <template slot="card">
        <div class="base-content">
          <search :isShowInput="true"
                  :inputTitle="inputPlaceholder"
                  :isReloadIvr="false"
                  :showAdvSearch="false"
                  :showAdd="true"
                  @add="addFun"
                  @search="searchNameFun"
                  @refresh="refresh"
                  @turnPage="turnPage"
                  :currentPage="currentPage"
                  :count="count"
                  :pageSize="10">
          </search>
          <el-table highlight-current-row :data="tableData" stripe size="mini">
            <el-table-column prop="displayName" :label="$t('configLazyLoad.channel.AliAPPTip2')">
            </el-table-column>
            <el-table-column prop="fileName" :label="$t('configLazyLoad.channel.wexinAPPTip3')">
            </el-table-column>
            <el-table-column :label="$t('public.operate')">
              <template scope="scope">
                <el-button @click="editAlipayMini(scope.row)" type="text" size="small" class="update">{{$t('sms.searchToLook')}}</el-button>
                <el-button type="text" @click="deleteAlipayMini(scope.row)" size="small" class="del">{{$t('public.delete')}}</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </template>
      <template slot="detail">
        <BreadCrumbConfig v-if="isShowAddOrEdit" :titleArr="titleArr" @back="cancel"></BreadCrumbConfig>
        <AlipayMiniAddOrEdit v-if="isShowAddOrEdit"
                             :alipayMiniForm="alipayMiniForm"
                             :addOrEdit= 'addOrEdit'
                             @alipayReset="alipayReset"
                             @cancelFun="cancel"
                             @saveFun="saveFun">

        </AlipayMiniAddOrEdit>
      </template>
    </configCompositionTwoWindowStyle>
  </div>
</template>
<script>
  import configCompositionTwoWindowStyle from '../../../../ui-modules/config/configCompositionTwoWindowStyle'
  import BreadCrumbConfig from '@/components/ui-modules/breadCrumb/BreadCrumbConfig'
  import search from '../base/search.vue'
  import AlipayMiniAddOrEdit from './AlipayMiniAddOrEdit'
  export default {
    name: 'AlipayMini',
    data () {
      return {
        count: 0,
        currentPage: 1,
        inputPlaceholder: this.$t('config.channel.AlipayMiniSearchName'),
        tableData: [],
        titleArr: [this.$t('configLazyLoad.channel.wexinAPPTip19'), this.$t('public.add')],
        isShowAddOrEdit: false,
        alipayMiniForm: {
          displayName: '',
          filePath: '',
          fileName: ''
        },
        addOrEdit: 'add',
        searchName: ''
      }
    },
    components: {
      configCompositionTwoWindowStyle,
      search,
      BreadCrumbConfig,
      AlipayMiniAddOrEdit
    },
    methods: {
      addFun () {
        this.alipayMiniForm = {}
        this.addOrEdit = 'add'
        this.isShowAddOrEdit = true
        this.titleArr = [this.$t('config.channel.wechatAppH5'), this.$t('public.add')]
      },
      refresh () {
        this.currentPage = 1
        this.getAlipayMiniList()
        this.isShowAddOrEdit = false
      },
      alipayReset () {
        this.alipayMiniForm.displayName = ''
        this.alipayMiniForm.fileName = ''
      },
      turnPage (val) {
        this.currentPage = val
        this.getAlipayMiniList()
      },
      searchNameFun (val) {
        this.searchName = val
        this.getAlipayMiniList()
      },
      cancel () {
        this.isShowAddOrEdit = false
      },
      editAlipayMini (item) {
        this.titleArr = [this.$t('config.channel.wechatAppH5'), this.$t('sms.searchToLook')]
        this.addOrEdit = 'edit'
        let data = {_id: item._id}
        this.$store.dispatch('getAlipayMiniById', data).then((res) => {
          this.alipayMiniForm = res.data
        })
        this.isShowAddOrEdit = true
      },
      deleteAlipayMini (item) {
        let data = {_id: item._id}
        this.$confirm(this.$t('configLazyLoad.channel.AliAPPTip3'), this.$t('public.tip'), {
          confirmButtonText: this.$t('public.confirm'),
          cancelButtonText: this.$t('public.cancel'),
          cancelButtonClass: 'primary_btn',
          confirmButtonClass: 'primary_btn',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('delAlipayMiniById', data).then((resp) => {
            if (resp && resp.success) {
              this.getAlipayMiniList()
              this.isShowAddOrEdit = false
              this.$message({
                message: this.$t('config.channel.deleteSuccess'),
                type: 'success'
              })
            } else {
              this.$message({
                message: this.$t('config.channel.deleteFailure'),
                type: 'error'
              })
            }
          })
        }).catch(() => {
        })
      },
      getAlipayMiniList () {
        let data = {
          page: this.currentPage,
          limit: 10,
          name: this.searchName
        }
        this.$store.dispatch('getAlipayMiniList', data).then((res) => {
          this.tableData = res.data || []
          this.count = res.count
        })
      },
      saveFun () {
        this.isShowAddOrEdit = false
        this.getAlipayMiniList()
      }
    },
    beforeMount () {
      this.getAlipayMiniList()
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .AlipayMini
    .notice
      color #3b5998
      padding 10px
      border-bottom 1px solid #E7E7EB
    .base-content
      height: calc(100vh - 170px)
      overflow-y: auto
</style>
